<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id='div1'>setTimeout this = window</div>
		<div id='div2'>bind 改变 setTimeout this 指向</div>
	</body>
	<script> 
		var Person = {
		        name:"fx",
		        age:18, 
		    } 
		function fn(x,y){
			console.log(x+","+y);
			console.log(this);
			console.log(this.name);
			console.log(this.age); 
		} 
		fn("h1",1);
		console.log('----------------') 
		//1. call 改变this指向
		fn.call(Person,"h2",2);
		
		console.log('----------------') 
		//2. apply() 与call（）非常相似，不同之处在于提供参数的方式，apply（）使用参数数组，而不是参数列表
		fn.apply(Person,["h3",3]);
		
		console.log('----------------') 
		
		var oDiv1 = document.getElementById("div1");
		oDiv1.onclick = function(){
			setTimeout(function(){
				console.log(this);
			},0)
		}
		
		//3. bind(this) 改变this指向
		var oDiv2 = document.getElementById("div2");
		oDiv2.onclick = function(){
			setTimeout(function(){
				console.log(this);
			}.bind(this),0)
		}
		
		Person.fn1
	</script>
</html>
